<template>
    <div class="category-container">
        <!-- 页面标题和操作区域 -->
        <div class="header-section">
            <h2 class="page-title">菜品分类管理</h2>
            <el-button 
                type="primary" 
                @click="editOrAdd=true;dialogFormVisible = true"
                class="add-btn"
            >
                <el-icon><Plus /></el-icon>
                新增分类
            </el-button>
        </div>

        <!-- 表格区域 -->
        <div class="table-section">
            <el-table 
                :data="Result.list" 
                style="width: 100%" 
                height="500"
                border
                stripe
                highlight-current-row
                class="category-table"
            >
                <el-table-column prop="name" label="分类名称" width="300">
                    <template #default="scope">
                        <div class="category-name">
                            <el-icon><Menu /></el-icon>
                            <span>{{ scope.row.name }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="状态" width="200">
                    <template #default="scope">
                        <el-tag 
                            :type="scope.row.status == 1 ? 'success' : 'danger'"
                            size="small"
                        >
                            {{ scope.row.status == 1 ? '启用' : '禁用' }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="type" label="类型" width="200">
                    <template #default="scope">
                        <el-tag 
                            :type="scope.row.type == 1 ? 'primary' : 'warning'"
                            size="small"
                        >
                            {{ scope.row.type == 1 ? '菜品分类' : '套餐分类' }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="sort" label="排序" width="150">
                    <template #default="scope">
                        <span class="sort-number">{{ scope.row.sort || 0 }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="150" fixed="right">
                    <template #default="scope">
                        <div class="action-buttons">
                            <el-button 
                                type="primary" 
                                :icon="Edit" 
                                @click="editOrAdd=false;dialogFormVisible = true;selectCategory(scope.row)" 
                                size="small"
                                circle
                            />
                            <el-button 
                                type="danger" 
                                :icon="Delete" 
                                @click="deleteCategory(scope.row)" 
                                size="small"
                                circle
                            />
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 分页区域 -->
        <div class="pagination-section">
            <el-pagination 
                background  
                v-model:page-size="pageSize"    
                v-model:current-page="pageNum" 
                @current-change="currentPage"     
                layout="total, sizes, prev, pager, next, jumper" 
                :total="Result.total"
                :page-sizes="[8, 16, 32, 64]"
                class="pagination"
            />
        </div>

        <!-- 新增/编辑对话框 -->
        <el-dialog 
            v-model="dialogFormVisible" 
            :title="editOrAdd ? '新增分类' : '编辑分类'" 
            width="500px" 
            draggable
            class="category-dialog"
        >
            <el-form :model="form" label-width="100px" class="form-container">
                <el-form-item label="分类名称" required>
                    <el-input 
                        v-model="form.name" 
                        placeholder="请输入分类名称"
                        clearable
                    />
                </el-form-item>
                <el-form-item label="分类顺序">
                    <el-input 
                        v-model="form.sort" 
                        placeholder="请输入数字以排序"
                        type="number"
                        clearable
                    />
                </el-form-item>
                <el-form-item label="分类类型" required>
                    <el-select v-model="form.type" placeholder="请选择类型" style="width: 100%">
                        <el-option label="菜品分类" value="1" />
                        <el-option label="套餐分类" value="2" />
                    </el-select>
                </el-form-item>
                <el-form-item label="分类状态" required>
                    <el-select v-model="form.status" placeholder="请选择状态" style="width: 100%">
                        <el-option label="启用" value="1" />
                        <el-option label="禁用" value="0" />
                    </el-select>
                </el-form-item>
            </el-form>
            
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button 
                        v-if="editOrAdd" 
                        type="primary" 
                        @click="dialogFormVisible = false;onFormdata()"
                    >
                        确认添加
                    </el-button>
                    <el-button 
                        v-else 
                        type="primary" 
                        @click="dialogFormVisible = false;updateCategory()"
                    >
                        确认修改
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
  Plus,
  Menu,
} from '@element-plus/icons-vue';
import { onMounted,watch } from 'vue';
import axios from 'axios';
import { reactive, ref } from 'vue';
const pageNum = ref(1);
const pageSize = ref(8);
const type = ref('');
const name = ref('');
const editOrAdd = ref(false);
const Result = ref({
    list:[],
    total:0
});

//新增对话框的相关操作
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const form = reactive({
  name: '',
  id: '',
  type: '',
  status: '',
  sort: ''
})

// 定义初始表单状态
const initialForm =()=> {
  form.name= '';
  form.id= '';
  form.type= '';
  form.status= '';
  form.sort= '';
}

//关闭对话框重置表单
watch(dialogFormVisible, (newVal, oldVal) => {
  if (newVal === false) {
    initialForm();
  }
});

//添加分类
const onFormdata = () =>{
    axios({
        url:"api/admin/category",
        method:"post",
        data:{
            name: form.name,
            type: form.type,
            status: form.status,
            sort: form.sort
        },
        headers:{
            token:sessionStorage.getItem('token')
        }
    }).then(res => {
        if(res.data.code == 200 ){
            alert("添加成功")
            alert(form.name)
            fetchDate()
        }else{
            alert("添加失败");
        }
    })
}


//编辑分类相关操作
const selectCategory = (row) =>{
    const id = String(row.id).trim();
    axios({
        url:"/api/admin/category/"+id,
        method:"get",
        headers:{
            token:sessionStorage.getItem('token')
        }
    }).then(res=>{
        form.id = res.data.data.id;
        form.name = res.data.data.name;
        // 确保type和status是字符串类型，以便正确匹配el-select选项
        form.type = String(res.data.data.type);
        form.sort = res.data.data.sort;
        form.status = String(res.data.data.status);
        console.log('编辑分类数据:', form);
        console.log('类型字段:', typeof form.type, form.type);
        console.log('状态字段:', typeof form.status, form.status);
    })
}
const updateCategory = () =>{
    axios({
            url:"/api/admin/category",
            method:"put",
            data:{
                name:form.name,
                type:form.type,
                status:form.status,
                sort:form.sort,
                id:form.id,
            },
            headers:{
            token:sessionStorage.getItem('token')
            }
        }).then(res=>{
            if(res.data.code ==200){
                alert("修改成功");
                fetchDate();
            }else{
                alert("修改失败");
            }
        })
}




//删除数据相关操作
const deleteCategory = (row) => {
    axios({
        url:"api/admin/category",
        method:"delete",
        params:{
            id:row.id
        },
        headers:{
            token:sessionStorage.getItem('token')
        }
    }).then(res=>{
        if(res.data.code == 200 ){
            alert("删除成功")
            fetchDate()
        }else{
            alert("删除失败")
        }
    })
}






onMounted(()=>{
    fetchDate()
})


//分页查询方法
const fetchDate = async () =>{
    axios({
    url:"/api/admin/category/page",
    method:"get",
    params:{      
        pageNum:pageNum.value,
        pageSize:pageSize.value,
        type:type.value,
        name:name.value
    },
    headers:{
        token:sessionStorage.getItem('token')
    }
    }).then(res=>{
        console.log(res.data.msg);
        Result.value = res.data.data;
    })
}
const currentPage = (newPage) =>{
pageNum.value = newPage;
fetchDate()
}






</script>

<style scoped>
.category-container {
  padding: 20px;
  background: #f5f7fa;
  min-height: 100%;
}

/* 页面标题和操作区域 */
.header-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-title {
  margin: 0;
  color: #333;
  font-size: 24px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-title::before {
  content: '';
  width: 4px;
  height: 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 2px;
}

.add-btn {
  height: 40px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  transition: all 0.3s ease;
}

.add-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* 表格区域 */
.table-section {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  margin-bottom: 20px;
  overflow: hidden;
}

.category-table {
  border-radius: 8px;
}

.category-table :deep(.el-table__header) {
  background: #f8f9fa;
}

.category-table :deep(.el-table__row:hover) {
  background: #f0f9ff;
}

/* 分类名称样式 */
.category-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.category-name .el-icon {
  color: #667eea;
  font-size: 16px;
}

/* 排序数字样式 */
.sort-number {
  display: inline-block;
  padding: 4px 8px;
  background: #f0f9ff;
  color: #667eea;
  border-radius: 4px;
  font-weight: 500;
  font-size: 12px;
  min-width: 30px;
  text-align: center;
}

/* 操作按钮样式 */
.action-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.action-buttons .el-button {
  transition: all 0.3s ease;
}

.action-buttons .el-button:hover {
  transform: scale(1.1);
}

/* 分页区域样式 */
.pagination-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  display: flex;
  justify-content: center;
}

.pagination {
  display: flex;
  justify-content: center;
}

/* 对话框样式 */
.category-dialog {
  border-radius: 12px;
}

.category-dialog :deep(.el-dialog__header) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 12px 12px 0 0;
  padding: 20px;
}

.category-dialog :deep(.el-dialog__title) {
  color: white;
  font-weight: 600;
}

.category-dialog :deep(.el-dialog__body) {
  padding: 30px;
}

.form-container {
  max-height: 60vh;
  overflow-y: auto;
}

.form-container :deep(.el-form-item) {
  margin-bottom: 20px;
}

.form-container :deep(.el-input),
.form-container :deep(.el-select) {
  width: 100%;
}

.form-container :deep(.el-form-item__label) {
  font-weight: 500;
  color: #333;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid #e9ecef;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .category-container {
    padding: 12px;
  }
  
  .header-section {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  
  .page-title {
    font-size: 20px;
    justify-content: center;
  }
  
  .add-btn {
    width: 100%;
    justify-content: center;
  }
  
  .category-table {
    font-size: 12px;
  }
  
  .action-buttons {
    flex-direction: column;
    gap: 4px;
  }
  
  .action-buttons .el-button {
    width: 32px;
    height: 32px;
  }
}

@media (max-width: 480px) {
  .category-container {
    padding: 8px;
  }
  
  .header-section,
  .table-section,
  .pagination-section {
    padding: 12px;
  }
  
  .category-dialog :deep(.el-dialog__body) {
    padding: 20px;
  }
  
  .form-container {
    max-height: 50vh;
  }
}

/* 动画效果 */
.header-section,
.table-section,
.pagination-section {
  transition: all 0.3s ease;
}

.header-section:hover,
.table-section:hover,
.pagination-section:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

/* 加载状态 */
.category-table :deep(.el-loading-mask) {
  background: rgba(255,255,255,0.9);
}

/* 空状态 */
.category-table :deep(.el-table__empty-block) {
  padding: 40px 0;
}

.category-table :deep(.el-table__empty-text) {
  color: #909399;
  font-size: 14px;
}

/* 标签样式优化 */
.el-tag {
  border-radius: 4px;
  font-weight: 500;
}

.el-tag--success {
  background-color: #f0f9ff;
  border-color: #67c23a;
  color: #67c23a;
}

.el-tag--danger {
  background-color: #fef0f0;
  border-color: #f56c6c;
  color: #f56c6c;
}

.el-tag--primary {
  background-color: #f0f9ff;
  border-color: #409eff;
  color: #409eff;
}

.el-tag--warning {
  background-color: #fdf6ec;
  border-color: #e6a23c;
  color: #e6a23c;
}
</style>